<html>

  <head>
    <title>todolist</title>
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <div class="main">
      <div style="color: #54a7d1;text-align: center;">Todo List</div>
      <div class="row">
        <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
        <input type="button" name="bt" id="button1" value="确认" onclick="handleClick(event)" />
        <input type="button" name="bt" id="button2" value="清空" onclick="empty(event)" />
      </div>
      <div id="todogroup">
        <!-- <div id="todo0"><input type = "checkbox" name="todocheck">吃饭<button type="button" onclick="deleteByIndex(0)">删除</button></div>
        <div>睡觉</div> -->

        <!--这里面 todo项-->
      </div>
      <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')">

      <!-- <div style="opacity: 0;">1111111111</div>
      <div>222222222</div>
      <div style="display: none;">3333333333</div>
      <div>444444444</div> -->

      <hr color=#987cb9 SIZE=2>
      </div>
      <div>      
        <input id="checkall" type = "checkbox" onclick="selectAll()" >全选</button>
      </div>
    </div>
  </body>
  <script lang="javacript">

    var intCnt = 0;

    function init(){
        document.getElementById("button2").onclick = empty;
    }
    function empty(e){
        console.log('delteall');
        console.log(e);
        document.getElementById("todogroup").innerHTML="";
    }
    function keyup(e){
      console.log(e);

      if(e.keyCode == 13){
        handleClick(e);
      }

    }
    
    function handleClick(e){

        console.log('handleClick');
        console.log(e);

        var temp = getValue();
        
        // <div id="todo0"><input type = "checkbox" name="todocheck">吃饭<button type="button" onclick="deleteByIndex(0)">删除</button></div>
        // document.getElementById("todogroup").innerHTML += "<div>"+ temp +"</div>"
        var div = document.createElement('div');
        // div.innerText = temp;
        // document.getElementById("todogroup").append(div);
        //
        //

        document.getElementById("todogroup").innerHTML += "<div class='item' div id='todo"
            + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
            + temp + "</div><button class='item-del' type='button' onclick='deleteByIndex("
            + intCnt + ")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;

        // document.getElementsByClassName("main")[0].style = "background-color: #333333;";
    }

    function getValue(){
      var temp = document.getElementById("inputtext");
      console.log(temp.value);
        
        return temp.value;
    }

    function deleteByIndex(index){
      document.getElementById("todo" + index).remove();
    }

    function enter(id){
      document.getElementById(id).style='background-color:#3e3e3e'
    }

    function leave(id){
      document.getElementById(id).style='background-color:#FFFFFF'
    }

    function selectAll(){
      var check = document.getElementById("checkall");
      console.log(check.checked);
      var cnt = document.getElementsByName("todocheck");
      if(check.checked==true){
        for(var i = 0; i < cnt.length; i++){
          cnt[i].checked = true;
        }
      } else {
        for(var i = 0; i < cnt.length; i++){
          cnt[i].checked = false;
        }
      }
    }


    init();
  </script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .main {
      /* background-color: aqua; */
      /* width: 200px; */
      /* height: 200px; */

      background-color: #ffefd7;
      padding: 8px;
      border: 3px solid #f8d9db;
      border-radius: 8px;
    }

    .row {
      display: flex;
      /* border: 3px;
      border-color: #1c1d1e; */
    }

    .item{
      display: flex;
      align-items: center;
      margin: 6px;
      padding: 3px;

      border-radius: 3px;
      /* background-color: #FFFFFF; */
    }

    .item:hover{
      background-color: #f4dbbd;
      transform: scale(1.2);
    }

    .item-value{
      flex-grow: 1;
      color: #000000;
    }

    .item-del{
      color: rgb(0, 0, 0);

      background-color: #f6c0b4;

      border: 0px;

      opacity: 0;

    }

    .item:hover .item-del{
      opacity: 1;
    }

    .input{
      padding: 5px;

      outline: none;
      border: 2px solid #b1afaf;

    }

    .input:focus{
      box-shadow: 0px 0px 10px #d5e6e0;
      border: 2px solid #d5e6e0;
    }
    
    #button1 {
      margin: 2px;
      border-radius: 2px;
      background-color: #e5ccd2;
      border: 2px solid #986e7e;
    }

    #button2 {
      margin: 2px;
      border-radius: 2px;
      background-color: #e5ccd2;
      border: 2px solid #986e7e;
    }
  </style>

</html>